不管是vue-pure-admin還是pure-admin-thin 都是用CLI的開發方式，和傳統的CDN引入script差很多
CLI模式更方便模組化重複使用，在分工合作上也相對比較好分配誰寫哪個模組，缺點是相對CDN比較不好上手
因此在看一個沒碰過的專案筆者認為最好的方式還是剝洋蔥大法比較好
讓我們開始今天的略懂 pure-admin-thin 資料夾結構吧 (第一天有安裝教學)
對於沒碰過大專案的朋友們先不要急著離開，我們只要關注最根本的東西即可
舉個例子:
Q: 大家在用筆電的時候會關注CPU和主機板的電路和每個晶片組做什麼事情嗎?
A: 不會對吧，就是關注OS怎麼操作，要什麼軟體安裝後就開始使用!
沒錯，就是這個概念，除非是很少數的狀況不然正常我們只要先關注怎麼用就好!
工具和套件是解決問題而不是增加問題XD
圖不精緻沒關係，這樣印象才深刻(基德:不要瞎掰好嗎)
先賣個關子，可以猜猜看為什麼要放這張圖XD
瀏覽器只認得HTML CSS JS,所以不管是用什麼語言寫通常最後都是產生這三劍客
我們先鎖定 index.html 並介紹四個很重要的檔案
index.html
src/main.ts
src/App.vue
src/router
src/store
主html只要關注三個地方
<div id="app">
根節點，可以在裡面不斷新增小孩最後變成一大串html
<div class="loader"></div>
上面有寫 <style>，畫面會出現三個點點的載入動畫
補充: <style>標籤通常還是會寫在<head>裡面，但是放在其他地方還是可以運作
<script type="module" src="/src/main.ts"></script>
引入主script
主邏輯檔案，上面引入好多東西，我們先關注下面這幾個，其他的有需要會在之後說明
import App from "./App.vue";
//引入vue根檔案
import router from "./router";
//引入路由
import { setupStore } from "/@/store";
//引入共用儲存區
import { getServerConfig } from "./config";
//這個未來再細談，總之是作者有建立共用的設定json檔案放在 public/serverConfig.json
//這邊把設定檔引入
import { createApp, Directive } from "vue";
//引入vue必要的原生語法
//Directive 可以當成是vue特殊語法像是 v-for v-if等等，除了官方自帶的還能自己撰寫
//可以參考: https://youtu.be/ErUfigmqB3g
const app = createApp(App);
getServerConfig(app).then(async config => {
app.use(router);
await router.isReady();
injectResponsiveStorage(app, config);
setupStore(app);
app.use(MotionPlugin).use(useI18n).use(ElementPlus);
app.mount("#app");
});
//產生vue注入App.vue(根vue檔案) = 初始化的概念
//接著掛載設定檔
//使用路由
//根據設定檔注入設定(ex:顏色,多國語系,排版)
//設定共用儲存區
//使用動畫套件，使用多國語系套件，使用UI模板套件
//都設定完成後最後掛載上去
vue的主檔案，重點有兩個
1.可以看到<router-view /> 裡面都交給路由去控制了，遇到不同路由就渲染不同畫面
2.多國語系 這邊的語法是套件 Element Plus 為了做多國語系(i18n)而準備的 可以和官方的範例做對照
通俗一點理解就是: 有一個超級共用區負責存變數，判斷裡面是中文還是英文，根據不同語言變更locale這個屬性，傳給底下所有組件(components)知道
例如:
https://ithelp.ithome.com.tw/2022ironman2022ironman
會看到2022鐵人賽首頁
https://ithelp.ithome.com.tw/2022ironman/signup/list2022ironman/signup/list
會看到2022鐵人賽首頁會看到選手列表
客戶輸入不同網址，程式渲染不同畫面or組件(components)
至於複雜的權限控制我們後面再說!
不是用vuex而是pinia
共用儲存區是存在記憶體，方便不同組件(components)互相傳遞資料
相對於localStorage(存在電腦硬碟)更加安全
複習一下
html->script引入
->main
->App.vue
->router
->store
->一堆套件
只要是網頁通常至少會有一個html檔案，由外而內觀察，整個脈絡會明朗很多
如果不先弄清楚這些概念，先急著記語法和套件怎麼用就有點本末倒置了!
iThome鐵人賽
看影片追技術